<script setup>
import { ref } from 'vue'
import { updateUserInfoApi } from '../../api'
import useUserStore from '../../store/userStore'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
// 表单数据
const form = ref({ ...userStore.userInfo, photo: null })

// 头像预览
const imageUrl = ref(userStore.userInfo.photo || '')
// 头像上传
const handleAvatarChange = (file) => {
  imageUrl.value = URL.createObjectURL(file.raw)
  form.value.photo = file.raw
}
// 表单校验规则
const formRules = {
  nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
  birthday: [{ required: true, message: '请选择生日', trigger: 'blur' }],
}
// 表单对象
const formRef = ref(null)

// 保存
const onSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    // 创建formData
    const formData = new FormData()
    // 添加表单数据
    formData.append('nickname', form.value.nickname)
    formData.append('gender', form.value.gender)
    formData.append('birthday', form.value.birthday)
    formData.append('photo', form.value.photo)
    // 发送请求
    const res = await updateUserInfoApi(formData)
    userStore.getUserInfo()
    if (res.message === 'success') {
      ElMessage.success('修改成功！')
    } else {
      ElMessage.error('修改失败！')
    }
  })
}
</script>

<template>
  <div class="container">
    <el-form
      ref="formRef"
      :rules="formRules"
      :model="form"
      label-width="auto"
      style="max-width: 400px"
    >
      <!-- 手机号 -->
      <el-form-item label="手机号">
        <el-input
          v-model="form.mobile"
          disabled
        />
      </el-form-item>
      <!-- 昵称 -->
      <el-form-item
        label="昵称"
        prop="nickname"
      >
        <el-input
          v-model="form.nickname"
          placeHolder="请输入昵称"
        />
      </el-form-item>
      <!-- 性别 -->
      <el-form-item
        label="性别"
        prop="gender"
      >
        <el-radio-group v-model="form.gender">
          <el-radio value="男">男</el-radio>
          <el-radio value="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 生日 -->
      <el-form-item
        label="生日"
        prop="birthday"
      >
        <el-date-picker v-model="form.birthday" />
      </el-form-item>
      <!-- 头像上传 -->
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          action="#"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleAvatarChange"
        >
          <img
            class="avatar-container"
            v-if="imageUrl"
            :src="imageUrl"
          />
          <el-icon
            v-else
            class="avatar-uploader-icon"
            ><Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <!-- 保存 -->
      <el-form-item label=" ">
        <el-button
          type="primary"
          @click="onSubmit"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-container {
  width: 178px;
  height: 178px;
}
</style>
